<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>影视剧留言板</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="comments">
   
    <!-- 评论内容 -->
    <h3 class="comm-head">评论</h3>
    <div class="comm-input">
      <textarea placeholder="爱发评论的人，运气都很棒" >
      </textarea>
      <div class="foot">
          <div class="word">0/100</div>
          <div class="btn">发表评论</div>
      </div>
    </div>
     <!-- 头部 -->
     <h3 class="comm-head">
      热门评论<sub>(5)</sub>
      <span class="active">默认</span>
      <span>时间</span>
    </h3>
    <!-- 评论列表 -->
    <ul class="comm-list">
      <li class="comm-item">
        <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
        <div class="info">
          <p class="name vip">
            清风徐来
            <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
          </p> 
          <p class="time">
            <span>2012-12-12</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del">删除</span>
          </p>
          <p>
            这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
          </p>
        </div>
      </li>
      <li class="comm-item">
        <div class="avatar"></div>
        <div class="info">
          <p class="name">
            清风徐来
          </p>
          <p class="time">
            <span>2012-12-12</span>
            <span class="iconfont icon-collect-sel"></span>
          </p>
          <p>
            这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
          </p>
        </div>
      </li>
    </ul>
  </div>
  <script src="/day5/课上讲解代码/lib/jquery.js"></script>
  <script>
    const q ={
      pageNum : 1,
      pageSize : 200,
      order:'id'
    }
    $.ajax({
      method:'get',
      url:'http://124.223.14.236:3001/api/notes',
      data:q,
      success:function(res){
      console.log(res);
      const gethtml = res.data.list.map(function(item){
        return `
        <li class="comm-item" id="${item.id}">
        <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
        <div class="info">
          <p class="name vip">
            ${item.username}
          </p>
          <p class="time">
            <span>${Date(item.time)}</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del">删除</span>
          </p>
          <p>
            ${item.content}
          </p>
        </div>
      </li>
        `
      }).join('')
      $('.comm-list').html(gethtml)
      }
    })
     $('.comm-list').on('click','li',function(){
      let id =$(this).attr('id')
      localStorage.setItem('key',id)
    })
    


     const id = localStorage.getItem('key')
      $.ajax({
      method:'get',
      url:`http://124.223.14.236:3001/api/notes/${id}`,
      success:function(res){
        console.log(res);
       
      }
    })

    $.ajax({
      method:'post',
      url:'http://124.223.14.236:3001/api/notes',
      headers:{
        Authorization:localStorage.getItem('token'),
      },
      success:function(res){
       console.log(res);
      }
    })
  </script>
</body>
</html>